<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
  <th:block th:fragment="links">
    <link rel="shortcut icon" size="32x32" th:href="${site.favicon}" />
    <link rel="apple-touch-icon" sizes="180x180" th:href="${site.favicon}" />
    <link rel="canonical" th:href="${site.url}" />
    <link
      rel="preload stylesheet"
      as="style"
      th:href="@{/assets/css/normalize.css?v={version}(version=${theme.spec.version})}"
    />
    <link
      rel="preload stylesheet"
      as="style"
      th:href="@{/assets/css/global.css?v={version}(version=${theme.spec.version})}"
    />
    <link
      rel="preload stylesheet"
      as="style"
      th:href="@{/assets/css/responsive.css?v={version}(version=${theme.spec.version})}"
    />
    <link rel="preload stylesheet" as="style" th:href="@{/assets/lib/animate/animate.min.css}">
    <!-- 主题 -->
    <link
      rel="preload stylesheet"
      as="style"
      th:href="@{/assets/css/theme.css?v={version}(version=${theme.spec.version})}"
    >
    <th:block th:replace="~{modules/key_css :: key_css}" />
    <!-- 字体图标 -->
    <link rel="preload stylesheet" as="style" href="//at.alicdn.com/t/font_2788564_crkap1ed9j5.css" />
    <th:block th:if="${theme.config.custom.iconfont != '' and theme.config.custom.iconfont != null}">
      <link rel="stylesheet" th:href="${theme.config.custom.iconfont}" />
    </th:block>
    <!-- 页面级css start -->
    <th:block th:if="${htmlType == 'index'}">
      <link
        rel="preload stylesheet"
        as="style"
        th:href="@{/assets/css/index.css?v={version}(version=${theme.spec.version})}"
      />
    </th:block>
    <th:block th:if="${htmlType == 'archives'}">
      <link
        rel="preload stylesheet"
        as="style"
        th:href="@{/assets/css/archives.css?v={version}(version=${theme.spec.version})}"
      />
    </th:block>
    <th:block th:if="${htmlType == 'post'}">
      <link
        rel="preload stylesheet"
        as="style"
        th:href="@{/assets/css/post.css?v={version}(version=${theme.spec.version})}"
      />
    </th:block>
    <th:block th:if="${htmlType == 'post' or tmlType == 'journals' or tmlType == 'sheet'}">
      <link rel="preload stylesheet" as="style" th:href="@{/assets/lib/prism/prism.min.css}" />
      <link
        rel="preload stylesheet"
        as="style"
        th:href="@{/assets/lib/prism/themes}+'/prism-'+${theme.config.code_block.code_theme}+'.css'"
      />
    </th:block>
    <th:block th:if="${htmlType == 'journals'}">
      <link
        rel="preload stylesheet"
        as="style"
        th:href="@{/assets/css/journals.css?v={version}(version=${theme.spec.version})}"
      />
    </th:block>
    <th:block th:if="${htmlType == 'photos'}">
      <link rel="stylesheet" th:href="@{/assets/lib/justifiedGallery/justifiedGallery.min.css}" />
      <link
        rel="preload stylesheet"
        as="style"
        th:href="@{/assets/css/photos.css?v={version}(version=${theme.spec.version})}"
      />
    </th:block>
    <!-- 页面级css end -->
    <!-- 页面顶部加载条 -->
    <th:block th:if="${theme.config.theme.enable_loading_bar}">
      <link rel="stylesheet" th:href="@{/assets/lib/nprogress/nprogress.min.css}" />
      <style th:inline="text">
        #nprogress .bar {
          height: [[${theme.config.theme.loading_bar_height ?: '3px'}]];
          background: var(--loading-bar);
        }

        #nprogress .peg {
          display: none;
        }
      </style>
      <script th:src="@{/assets/lib/nprogress/nprogress.min.js}"></script>
    </th:block>
    <!-- 轮播图 -->
    <th:block th:if="${htmlType == 'index'} and ${theme.config.carousel.enable_banner}">
      <link rel="stylesheet" th:href="@{/assets/lib/swiper/swiper.min.css}" />
    </th:block>
    <!-- 大图 -->
    <th:block th:if="${theme.config.beauty.enable_big_banner}">
      <link
        rel="preload stylesheet"
        as="style"
        th:href="@{/assets/css/beauty.css?v={version}(version=${theme.spec.version})}"
      />
    </th:block>
    <!-- 鼠标皮肤 -->
    <th:block th:if="${ttheme.config.other.enable_clean_mode != true} and ${theme.config.theme.cursor_skin != 'off'}">
      <link rel="stylesheet" th:href="@{/assets/cursor/style/min}+'/'+${theme.config.theme.cursor_skin}+'.min.css'">
    </th:block>
    <!-- 图片查看 -->
    <th:block th:if="${htmlType == 'post'} or ${htmlType == 'journals'} or ${htmlType == 'photos'}">
      <link rel="stylesheet" th:href="@{/assets/lib/fancybox/jquery.fancybox.min.css}" />
    </th:block>
    <!-- 文本复制 -->
    <th:block th:if="${htmlType == 'post'} or ${htmlType == 'journals'} or ${htmlType == 'sheet'}">
      <link rel="stylesheet" th:href="@{/assets/lib/qmsg/qmsg.css}" />
    </th:block>

    <style th:inline="text">
      #Joe .joe_container {
        max-width: [[${theme.config.basic.content_max_width}]];
      }
    </style>

    <style
      th:if="${theme.config.custom.custom_css != null and theme.config.custom.custom_css != ''}"
      th:utext="${theme.config.custom.custom_css}"
    >
    </style>

    <style>
      .sjs-default {
        position: relative;
        padding: 0;
        margin: 0;
        opacity: 0;
        transition: height .2s ease-out, opacity .2s ease-out .2s;
      }

      [data-sjsel] {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        transition: transform .2s ease-out;
      }

      .evan-friends .sub-text {
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .evan-friends .evan-f-left {
        width: 100px;
        min-width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease-in-out;
      }

      .evan-friends .evan-f-left .f-avatar {
        width: 70px;
        height: 70px;
        box-sizing: border-box;
        border-radius: 50%;
        overflow: hidden;
        transition: all 0.2s ease-in-out;
        border: 2px solid #ffffff;
        background-color: #ffffff;
      }

      .evan-f-left .f-avatar .avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        margin: 0;
        object-fit: cover;
      }

      .evan-friends .evan-f-right {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
      }

      .evan-friends .joe_detail__friends-item .contain {
        border-radius: 12px;
      }

      .evan-friends .joe_detail__friends-item .contain .title::after {
        display: none;
      }

      .evan-friends .title {
        max-width: 70%;
        min-width: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.3em;
        color: var(--fcolor);
        margin-top: 12px;
      }

      .evan-friends .title .icon {
        position: absolute;
        top: -1.6em;
        right: calc(50% - 1.5em);
        width: 1em;
        min-width: 1em;
        height: 1em;
        min-height: 1em;
        overflow: hidden;
        font-size: 20px;
        border-radius: 50%;
        border: 1px solid #ffffff;
        background-color: #ffffff;
      }

      .evan-friends .content {
        margin-top: 10px !important;
        font-size: 0.93em;
        color: var(--main);
      }

      .evan-friends .joe_detail__friends-item .contain .content .desc {
        -webkit-line-clamp: 1;
      }

      .evan-friends .contain {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        border: 1px solid var(--fcolor);
        transition: all .2s ease-in-out;
      }

      .evan-friends .contain:hover {
        transform: translateY(-3px);
        box-shadow: 0px 0px 20px -5px rgb(158 158 158 / 20%);
      }

      .evan-friends .contain::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
        background-color: var(--fcolor) !important;
        transform: scale(0);
        transition: all 0.5s ease-in-out;
        transform-origin: right bottom;
        border-bottom-left-radius: 12px;
      }

      .evan-friends .contain:hover .f-avatar {
        transform: scale(1.1);
        box-shadow: 0px 2px 12px rgba(255, 255, 255, .5);
      }

      @media (max-width: 768px) {
        .evan-friends .contain {
          border-color: #ebeef5;
        }

        .evan-friends .contain:hover {
          border-color: var(--fcolor);
          box-shadow: 0px 0px 20px -5px rgb(158 158 158 / 20%);
        }
      }
    </style>
  </th:block>
</html>
